<template>
  <view class="container">
    <!-- 求事业 -->
    <view class="img" @click="showpup(1)">
      <image :src="imgurl + setting.career_image" style="width: 100%; height: 100%" mode="aspectFill"></image>
      <image src="../../static/hopecarrer.png" style="width: 172rpx; height: 54rpx; position: absolute; top: 92rpx; left: 76rpx" mode="aspectFill"></image>
      <image src="../../static/carrer.png" style="width: 167rpx; height: 218rpx; position: absolute; top: 23rpx; right: 96rpx" mode="aspectFill"></image>
    </view>
    <!-- 求姻缘 -->
    <view class="img" @click="showpup(2)">
      <image :src="imgurl + setting.marriage_image" style="width: 100%; height: 100%" mode="aspectFill"></image>
      <image src="../../static/hopemerray.png" style="width: 173rpx; height: 54rpx; position: absolute; top: 92rpx; left: 76rpx" mode="aspectFill"></image>
      <image src="../../static/merray.png" style="width: 284rpx; height: 236rpx; position: absolute; top: 11rpx; right: 38rpx" mode="aspectFill"></image>
    </view>
    <!-- 求学习 -->
    <view class="img" @click="showpup(3)">
      <image :src="imgurl + setting.study_image" style="width: 100%; height: 100%" mode="aspectFill"></image>
      <image src="../../static/hopestudy.png" style="width: 172rpx; height: 54rpx; position: absolute; top: 92rpx; left: 76rpx" mode="aspectFill"></image>
      <image src="../../static/study.png" style="width: 189rpx; height: 225rpx; position: absolute; top: 20rpx; right: 85rpx" mode="aspectFill"></image>
    </view>

    <image :src="imgurl + setting.logo" class="logo" mode="aspectFill"></image>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <view class="box">
        <view class="item" @click="pay(1, 'advantage')">看广告免费祈福</view>
        <view class="item" @click="pay(2, 'cheaper')">{{ '普通祈福(' + setting.ordinary_prayer_price + '元)' }}</view>
        <view class="item" @click="pay(3, 'expensave')">{{ '诚意祈福(' + setting.good_faith_prayer_price + '元)' }}</view>
        <view class="item" @click="cancelshow">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app';

// 获取全局的数据
const proxy = getCurrentInstance().appContext.config.globalProperties;
const http = proxy.$http;
const imgurl = ref('https://prayer.jiangkukeji.cn');

// 获取祈福的金额
let setting = ref({});
const seek = ref('');
const style = ref('');
const getMoney = async () => {
  const res = await http('/user/getSetRes', {}, 'POST');
  // console.log('获取的设置的祈福金额', res.data);
  setting.value = res.data;
  console.log(setting.value);
};

// 显示弹框
const popup = ref(null);
// 打开弹框
const showpup = (type) => {
  //   type;1 求事业  2 求姻缘  3 求学习
  seek.value = type;
  uni.setStorageSync('type', type);
  popup.value.open();
};
// 关闭弹框
const cancelshow = () => {
  popup.value.close();
};

// 调起支付
const pay = async (style2, type) => {
  console.log(style2, type);
  style.value = style2;
  uni.setStorageSync('choose', type);
  //1.调支付的接口获取订单信息
  const res = await http('/user/addOrder', { seek: seek.value, style: style.value }, 'POST');
  console.log(res);
  if (style2 == 1) {
    uni.navigateTo({
      url: '/pages/advertisement/advertisement?orderid=' + res.data.out_trade_no
    });
  } else if (style2 == 2 || style2 == 3) {
    //2.支付完成之后跳转到祈福页(无支付资料暂时跳过)
    uni.navigateTo({
      url: '/pages/qifu/qifu?orderid=' + res.data.out_trade_no
    });
    return;
    uni.requestPayment({
      success: () => {
        uni.navigateTo({
          url: '/pages/qifu/qifu?orderid=' + res.data.out_trade_no
        });
      },
      fail: () => {
        uni.navigateTo({
          url: '/pages/index/index'
        });
      }
    });
  }
};

// 免费祈福：跳转到广告页面（废弃）
const goadvantage = () => {
  // 创建订单
  uni.setStorageSync('choose', 'advantage');
};

onLoad(() => {
  // 获取设置
  getMoney();
});
onHide(() => {
  popup.value.close();
});
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  width: 750rpx;
  height: 1440rpx;
  background: #ffebef;
  .img {
    position: relative;
    top: 78rpx;
    width: 624rpx;
    height: 264rpx;
    background: #ffcedd;
    border-radius: 40rpx;
    margin: 0 63rpx 46rpx;
    border: 8rpx solid #242424;
  }
  .logo {
    width: 260rpx;
    height: 260rpx;
    background: #ffcedd;
    border-radius: 35rpx;
    margin: 85rpx 245rpx 129rpx;
  }
  .box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 750rpx;
    height: 618rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .item {
      width: 100%;
      height: 130rpx;
      text-align: center;
      line-height: 109rpx;
      border-bottom: 2rpx solid #e7e7e7;
      &:nth-child(4) {
        border: none;
      }
    }
  }
}
</style>
